<template>
    <div class="header">
        <el-tabs v-model="activeValue" type="card">
            <el-tab-pane label="标准券查询" name="standard" v-if="showResource || checkPermission('B_0339')">
                <Standard :activeValue="activeValue" />
            </el-tab-pane>
            <el-tab-pane label="交易所回购查询" name="exchangeHg" v-if="showResource || checkPermission('B_0340')">
                <ExchangeHg :activeValue="activeValue" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ExchangeHg from './comprehensive-info-query/exchange-hg.vue';
import Standard from './comprehensive-info-query/standard.vue';
import { getUser } from '@/utils/user-util';
import { checkPermission } from '@/utils/tools';

@Component({ name: 'ComprehensiveInfoQuery', components: { Standard, ExchangeHg } })
export default class ComprehensiveInfoQuery extends Vue {
    activeValue: string = 'standard';
    panes: any[] = [
        {
            label: '标准券查询',
            name: 'standard',
            content: 'Standard',
        },
        {
            label: '交易所回购查询',
            name: 'exchangeHg',
            content: 'ExchangeHg',
        },
    ];
    showResource: boolean = false; // 是否显示字段
    checkPermission = checkPermission;

    mounted() {
        this.showResource = getUser().superuser;
        if (!checkPermission('B_0339') && checkPermission('B_0340')) {
            this.activeValue = 'exchangeHg';
        }
        console.log(this.showResource, 'showResource');
    }
}
</script>
<style lang="scss" scoped>
.header {
    min-width: 1200px;
    padding-top: 4px;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}
/deep/ .el-tabs .el-tabs__nav {
    border: none;
    .is-active {
        border-color: #409eff;
        border-bottom: 2px solid #409eff;
    }
}

/deep/ .el-input--mini .el-input__icon {
    line-height: 40px;
}
</style>
